
class Element {
    constructor(type, props, children) {
        this.type = type;
        this.props = props;
        this.children = children;
    }
}

const createElement = function(type, props, children) {
    return new Element(type, props, children);
}

/**
 * 设置属性
 * @param {HTMLElement} node 设置属性的节点
 * @param {String} key 设置属性的属性名
 * @param {any} value 设置属性的属性值
 */
function setAttr(node, key, value) {
    switch(key) {
        case 'value': // input类型或者textarea
            if (node.tagName.toUpperCase() === 'INPUT' ||
                node.tagName.toUpperCase() === 'TEXTAREA') {
                node.value = value;
            } else {
                node.setAttribute(key, value);
            }
            break;
        case 'style':
            node.style.cssText = value;
            break;
        default:
            node.setAttribute(key, value);
            break;
    }
}

// render方法将virtual DOM转换成真实DOM
function render(eleObj) {
    let el = document.createElement(eleObj.type);
    // Object.keys(eleObj.props)
    for (let key in eleObj.props) {
        // el.setAttribute(key, eleObj.type[key]);
        // 设置属性，不能纯用setAttribute的方式。
        // 比如input的value属性就不能通过setAttribute的方式来设，style样式也不是key-value的形式
        if (eleObj.props.hasOwnProperty(key)) {
            setAttr(
                el,
                key,
                eleObj.props[key]
            )
        }
    }

    if (eleObj.children && eleObj.children instanceof Array) {
        eleObj.children.forEach((child) => {
            let childEl = '';
            childEl = child instanceof Element ? render(child) : document.createTextNode(child);
            el.appendChild(childEl);
        })
    }
    return el;
}

// 渲染虚拟DOM到浏览器
function renderDom(el, target) {
    target.appendChild(el);
}

export {
    createElement,
    render,
    renderDom,
    setAttr
}